<template>
  <div>
    <el-collapse value="common">
      <el-collapse-item title="公共配置" name="common">
        <div class="pad-lft-rgt-10">
          <el-row :gutter="10" :span="12">
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">颜色</span>
                <PopoverColor :colorValue="widget.UI.data.indicatorData.color">
                  <CustomColorPicker v-model="widget.UI.data.indicatorData.color" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">指示点颜色</span>
                <PopoverColor :colorValue="widget.UI.data.indicatorData.activeColor">
                  <CustomColorPicker v-model="widget.UI.data.indicatorData.activeColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
          </el-row>
          <div class="flex-com mar-btm">
            <span class="label-title">指示点大小</span>
            <el-input-number v-model="widget.UI.data.indicatorData.size" placeholder="指示点大小" size="mini"
                             class="width-100"></el-input-number>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="Tab配置" name="tabConfig">
        <div class="pad-lft-rgt-10">
          <draggable v-model="widget.UI.data.items" @end="onEnd" handle=".drag-mover">
            <transition-group>
              <div v-for="tab in widget.UI.data.items" :key="tab.widgetId">
                <div class="flex-com mar-btm">
                  <span class="label-title  cursor-pointer drag-mover">输入名称</span>
                  <el-input
                    v-model="tab.text"
                    placeholder="输入名称" size="mini"
                    @change="val => tabNameChange(val, tab.widgetId)"></el-input>
                  <span
                    v-if="widget.UI.data.items.length >1"
                    class="el-icon-delete cursor-pointer font-hover-danger"
                    @click="deleteTab(tab.text, tab.widgetId)"></span>
                </div>
              </div>
            </transition-group>
          </draggable>

          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addTab">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加滚动页</span>
            </div>
          </div>
        </div>
      </el-collapse-item>

    </el-collapse>
  </div>
</template>

<script>
  import {WidgetPageView} from "@/modules/IDE/widget/atom/widgetPageView";
  import PopoverColor from "@/components/IDE/colorPicker/Popovers.vue";
  import CustomColorPicker from "@/components/IDE/colorPicker/Color.vue";
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";
  import {confirmHandle} from "@/utils";
  import draggable from 'vuedraggable';
  export default {
    name: 'PageViewSpec',
    components: { draggable, CustomColorPicker, PopoverColor},
    props: {
      widget: {
        type: WidgetPageView,
        default: () => {
          return {};
        }
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      }
    },
    methods:{

      onEnd() {
        const updatedArray = this.widget.UI.data.items.map((item, index) => {
          item.sortNo = index + 1;
          return item;
        });
        updatedArray.forEach((item, index) => {
          const widget = WidgetFactory.getWidgetById(item.widgetId);
          widget && (widget.sortNo = item.sortNo);
        });
        this.$emit('dragEvent', updatedArray);
        this.widget.children.sort((a, b) => a.sortNo - b.sortNo);
        this.$EventBus.$emit('pageViewSortExecute');
        this.$forceUpdate();
      },
      addTab() {
        this.$EventBus.$emit(`pageViewAdded-${this.widget.id}`);
      },
      deleteTab(name, childId) {
        confirmHandle({label: `确定要删除 ${name} 吗?`}).then(() => {
          this.$EventBus.$emit(`pageViewDeleted-${this.widget.id}`, childId);
        }).catch(() => {
        });
      },
      tabNameChange(name, widgetId) {
        // 同步标签名称至组件名称
        const widget = WidgetFactory.getWidgetById(widgetId)
        widget && (widget.name = name);
      }
    }
  };
</script>

<style scoped lang="less">
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 70px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
